<template> 
	<view class="appBox">
		
		<view class="main-top" style="background: #f5f5f5;">
		<view style="display: flex;justify-content: space-between;padding: 20px;">
			<view>
				<view style="font-size: 32rpx;color: black;">支付给</view>
				<view>{{user.realName}}  <text v-if="user.phone">（{{user.phone}}）</text></view> 
			</view>
			<view>
				<image style="width: 120rpx;height: 120rpx;" :src="user.avatar"></image>
			</view>
		</view>
		</view>
		
		<view class="setMoneyPage" >
			<view class="title">
				付款额度
			</view>
			<view class="content">
				 <image class="yj-img"   src="/static/images/scan_qb_icon.png"></image> 
				 <input type='number' maxlength="10" placeholder="请输入额度" class="input" v-model="money" auto-focus="true"></input>
			</view>
			
			<view class="content">
				 <image class="yj-img"   src="/static/images/scan_payss_icon.png"></image> 
				 <input type='number' password="true" maxlength="6" placeholder="请输入交易密码" class="input" v-model="payPass" auto-focus="true"></input>
			</view>
		 
			 
			<view class="btn" @click="confirm">
				支 付
			</view>
		</view>
		</view> 
</template>
<script>
	import {
		getUserInfoWallet,addPayment
	} from '@/api/user.js';
	export default {
		data() {
			return {
				user:{},
				invite_code:"",
				money:"",
				type:-1,
				payPass:'',
			}
		},
		onLoad(e) {
			this.money = e.money
			this.invite_code = e.invite_code
			this.type = e.type
			
		},
		onShow() {
		   this.getUserData()
		},
		methods:{ 
			confirm(){ 
				let that = this;
				if(this.money == ""){
				 return	uni.showToast({
						title:"请输入额度",icon:'none'
					})
				}
				if(this.money <= 0){
				 return	uni.showToast({
						title:"额度错误",icon:'none'
					})
				} 
				if(this.payPass.length != 6){
				 return	uni.showToast({
						title:"输入6位交易密码",icon:'none'
					})
				}
				let a ={money:that.money,uid:that.invite_code,type:that.type,payPass:that.payPass};
				
				addPayment(a).then(res => {
					if(res.code == 200){
						uni.showToast({
							 title:res.message,icon:'none'
					   })
					   that.money = ""
					   setTimeout(()=>{
					    uni.navigateBack(1)
					   },2000)
					  
					}
				})
			},
			
			getUserData() {
				let that = this;
				getUserInfoWallet(that.invite_code).then(res => { 
					if(res.data){
						that.user = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.appBox { 
		.setMoneyPage {
			padding: 60rpx 40rpx 0 40rpx;

			.title {
				font-size: 24rpx;
				margin-bottom: 15rpx;
			}

			.content {
				height: 100rpx;
				display: flex;
				margin: 20rpx 0;

				.input { 
					font-size: 60rpx;
					font-weight: bold;
					padding-left: 25rpx;
					border-bottom: #c5c5c5 solid 1rpx;
				}
			}

			.btn {
				margin-top: 180rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: $theme-color;
				border-radius: 40rpx;
				text-align: center;
				font-size: 33rpx;
				font-weight: bold;
				color: white;
			}
		} 
	}
	.yj-img{width: 50rpx;height: 50rpx; position: relative;top: 15px;}
.uni-input-placeholder { 
    font-size: 24rpx;
    top: 5px;
}

	page {
		background-color: #fff !important;
	}
</style>